<template>
  <div>
    <div class="select-box-con">
      <div class="box-head">
        <h1>Swap on Microseed System</h1>
        <img class="box-close" src="@/assets/images/close.png" @click="close" alt=""/>
     </div>
      <div class="box-main">
        <div class="box-main-item">
          <input type="number" @blur="changeSubmitCount" style="width: 60%" v-model="willCount">
          <span>
            <img src="@/assets/images/pop-icon.png" alt="" srcset="">
            {{ convertunit }}
            <img src="@/assets/images/down.png" alt="" srcset="">
          </span>
        </div>
        <div class="box-main-item-down" >
          <img src="@/assets/images/arrowdown.png">
        </div>
        <div class="box-main-item">
          <span>{{ recieveToNum(willCount) }}</span>
          <span>
            <img src="@/assets/images/pop-icon.png" alt="" srcset="">
            {{ tokensymbol }}
            <img src="@/assets/images/down.png" alt="" srcset="">
          </span>
        </div>
        <div class="box-main-pro">
          <span>1{{ $store.state.wallet.currency }} ≈ {{ recieveToNum(1) }}{{ tokensymbol }}
<!--            <i>15esc</i> -->
          </span>
          <span>
            <img src="@/assets/images/down.png" alt="" srcset="">
          </span>
        </div>
        <div class="box-main-btn" @click="approve">
          {{ $t('approve') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

// import {Message} from "element-ui";

export default {
  name: `step1`,
  props:{
    defaultCount:{},
    salePrice:{
      default:0.1,
    },
    swaprate:{
      default:0,
      required:true,
    },
    tokensymbol:{
      default:'ARK',
      required:true,
    },
    convertunit:{
      default:'ARK',
      required:true,
    },
    usdc_rate:{
      default:0,
      required:true,
    },
    max:{
      default:0,
      required:true
    },
    min:{
      default:0,
      required:true
    }
  },
  data() {
    return {
      /*
      * 目标.将钱包内标注类型的积分类型换算成ARK
      * */
      willCount:1,
    }
  },
  mounted() {
    const  wallet = JSON.parse(localStorage.getItem('myWallet') || "{wallet:''}").wallet
    console.log('读取钱包',wallet)
    this.willCount = this.defaultCount
  },
  methods:{
    close(){
      this.$emit('close')
    },
    changeSubmitCount() {
      const newval = parseFloat(this.willCount)
      if (newval > this.max) {
        this.willCount = this.max;
      } else if (newval < this.min) {
        this.willCount = this.min;
      } else {
        this.willCount = newval.toFixed(4)
      }
    },
    recieveToNum(count) {
      if (count > 0) {
        // 1.如果选择钱包类型是ARK，则使用比例兑换： CRE（得项目到积分） = 购买积分数量（submitOrder.count） *  兑换比例（transaction.swaprate）
        // 2.如果选择钱包类型是非ARK,则使用钱包积分 :  CRE（得项目到积分） =  购买积分数量（submitOrder.count）* ARK汇率（transaction.tokeninformation.usdc_rate）* 兑换比例（transaction.swaprate）
        // 1.2两条作废，改成新的计算逻辑，即不用钱包类型判断了，钱包只是一串数值，将根据项目的实际计算类型，即ctype来判断，1为比例计算，2为价格计算
        // if (currency === 'ARK') {
        //   return (count * parseFloat(this.swaprate)).toFixed(2)
        // } else {
        //   return (count * parseFloat(this.usdc_rate)* parseFloat(this.swaprate)).toFixed(2)
        // }
        return parseFloat(count * parseFloat(this.swaprate)).toFixed(0)

      } else
        return 0
    },

    approve(){
      const  wallet = JSON.parse(localStorage.getItem('myWallet') || "{wallet:''}").wallet
      // if (parseFloat(wallet.balance)<this.willCount){
      //   Message.error(this.$t('dialog.insufficientAccountBalance'))
      //   return false;
      // }
      console.log("钱包",wallet)
      this.$emit('onApprove',this.willCount)
    }
  },
}
</script>

<style scoped>
.select-box-con{
  width: 300px;
  height: 330px;;
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%)
}
.box-main-item{
  background-color: #f5f7f4;
  padding: 15px 10px;
  font-family: Impact, Charcoal, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
}
.box-main-item input{
  background-color: transparent;
  outline: none;
  border: 1px solid transparent;
}
.box-main-item input:focus{
  border: 1px solid #6C6C6C;
}
.box-main-pro{
  background-color: #fff;
  padding: 10px 10px;
  font-family: Impact, Charcoal, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.17);
  margin: 15px 0;
}
.box-main-pro i{
  display: inline-block;
  border-radius: 5px;
  background-color: #ecfbd9;
  padding: 2px 5px;
  font-style: normal;
  font-size: 10px;
  color: #a3b684;
}
.box-main-btn{
  background-color: #7bba55;
  color: #fff;
  text-align: center;
  padding: 15px 10px;
  font-size: 20px;
  box-shadow: #0ec008 0px 0px 2px;
  border-radius: 5px;
  cursor: pointer;
}
.box-main-item span:nth-child(2) img{
  width: 15px;
}
.box-main-item-down{
  text-align: center;
  padding: 5px;
  //transform: rotate(180deg);
}
.box-main-item-down img{
  width: 15px;
}
</style>
